<template>
  <view class="countdown">
    <view class="count">
      <view class="center">
        <view class="up">
          <text>{{ next }}</text>
        </view>
        <view class="down">
          <text>{{ last }}</text>
        </view>
      </view>

      <view class="previous"
        ><text>{{ last }}</text></view
      >
      <view class="previous-bg"></view>

      <view class="next"
        ><text>{{ next }}</text></view
      >
      <view class="next-bg"></view>

      <!-- <view class="current_top top box">9</view>
      <view class="shadow"></view>
      <view class="next_top top box">7</view>
      <view class="current_bottom bottom box">7</view>
      <view class="next_bottom bottom box">9</view> -->
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data: () => ({
    last: 0,
    next: 1,
    timer: null,
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  mounted() {
    this.open();
  },
  methods: {
    open() {
      this.timer = setInterval(() => {
        if (this.next >= 9) {
          this.next = 0;
        } else {
          this.next = Number(this.next) + 1;
        }

        if (this.last >= 9) {
          this.last = 0;
        } else {
          this.last = Number(this.last) + 1;
        }
        // this.next = Number(this.next) + 1;
        // this.last = Number(this.last) + 1;;
      }, 1000);
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.countdown {
  .count {
    box-shadow: 0 10rpx 5rpx -5rpx rgba(0, 0, 0, 0.2);
    height: 300rpx;
    left: 45%;
    line-height: 300rpx;
    margin: -150rpx 0 -100rpx;
    -moz-perspective: 500rpx;
    -webkit-perspective: 500rpx;
    perspective: 500rpx;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateZ(0);
    width: 200rpx;
    background: #000;
    overflow: hidden;
    border-radius: 11rpx;
    .box {
      background: #202020;
      color: #f8f8f8;
      display: block;
      font-size: 250rpx;
      left: 0;
      position: absolute;
      top: 0;
      text-shadow: 0 1rpx 0 #282828, 0 2rpx 0 #1e1e1e, 0 3rpx 0 #141414,
        0 4rrpx 0 #0a0a0a, 0 5rpx 0 #000, 0 0 10rpx rgba(0, 0, 0, 0.8);
      transform-origin: 0 150rpx 0;
      width: 100%;
    }
    .box:before {
      border-bottom: 2rpx solid #000;
      content: '';
      left: 0;
      position: absolute;
      width: 100%;
    }
    .box:after {
      box-shadow: inset 0 0 60rpx rgba(0, 0, 0, 0.35);
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    .top {
      border-top-left-radius: 11rpx;
      border-top-right-radius: 11rpx;
      box-shadow: inset 0 2rpx rgba(0, 0, 0, 0.9),
        inset 0 3rpx 0 rgba(255, 255, 255, 0.4);
      height: 50%;
      overflow: hidden;
      color: #fff;
    }
    .top:before {
      bottom: 0;
    }
    .top:after {
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
      border-top-left-radius: 11rpx;
      border-top-right-radius: 11rpx;
    }
    .bottom {
      border-radius: 10rpx;
      height: 100%;
    }
    .bottom:before {
      top: 50%;
    }
    .bottom:after {
      border-radius: 10rpx;
      background: linear-gradient(
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0)
      );
    }
    .top {
      border-top-left-radius: 11px;
      border-top-right-radius: 11px;
      height: 50%;
    }
    .current_top {
      transform-style: flat;
      z-index: 3;
    }
    .next_top {
      transform: rotate3d(1, 0, 0, -90deg);
      z-index: 4;
      // transition: transform 0.35s ease-out 0.35s;

      animation: timerun 1s linear 0s infinite normal none;
    }
    .bottom {
      border-radius: 10px;
    }
    .current_bottom {
      z-index: 2;
      transform: rotate3d(1, 0, 0, 90deg);
      // transition: transform 0.35s ease-in, box-shadow 0.35s ease-in;
      animation: timerun-1 1s linear 0s infinite normal none;
    }
    .next_bottom {
      z-index: 1;
    }
  }
}

.center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.previous-bg,
.previous,
.up {
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 11rpx;
  border-top-right-radius: 11rpx;
  text {
    position: absolute;
    top: calc(100% - 150rpx);
    left: calc(50% - 100rpx);
  }
}
.next-bg,
.next,
.down {
  position: absolute;
  bottom: 0;
  left: 0;
  text {
    position: absolute;
    bottom: calc(100% - 150rpx);
    left: calc(50% - 100rpx);
  }
}
.next-bg,
.next,
.previous-bg,
.previous,
.down,
.up {
  width: 100%;
  height: 50%;
  overflow: hidden;
  box-shadow: inset 0 2rpx rgba(0, 0, 0, 0.9),
    inset 0 3rpx 0 rgba(255, 255, 255, 0.4);

  background: linear-gradient(rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
  text {
    width: 100%;
    height: 300rpx;
    text-shadow: 0 1rpx 0 #282828, 0 2rpx 0 #1e1e1e, 0 3rpx 0 #141414,
      0 4rrpx 0 #0a0a0a, 0 5rpx 0 #000, 0 0 10rpx rgba(0, 0, 0, 0.8);
    color: #f8f8f8;
    font-size: 250rpx;
  }
}

.previous-bg,
.previous {
  transform: rotate3d(0, 0, 0, 0deg);
  backface-visibility: hidden;
  transform-origin: 50% 100% 0;

  animation: timerun 1s linear 0s infinite normal none;
}
.previous {
  z-index: 2;
}
.next {
  z-index: 1;
}
.next-bg,
.next {
  transform: rotate3d(1, 0, 0, -180deg);
  backface-visibility: hidden;
  transform-origin: 0% 0% 0;
  animation: timerun-1 1s linear 0s infinite normal none;
}

@keyframes timerun {
  0% {
    /* 动画代码 */
    transform: rotate3d(1, 0, 0, 0deg);
    opacity: 1;
  }
  98% {
    /* 动画代码 */
    transform: rotate3d(1, 0, 0, -180deg);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes timerun-1 {
  0% {
    /* 动画代码 */
    transform: rotate3d(1, 0, 0, -180deg);
    opacity: 1;
  }
  98% {
    /* 动画代码 */
    transform: rotate3d(1, 0, 0, -360deg);
  }
  100% {
    opacity: 1;
  }
}
</style>
